<template>
  <div class="dispose_container">
    <el-card class="box-card" shadow="always" style="background: #fafafa">
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <span style="font-weight: 700">告警信息</span>
        </div>
      </template>
      <div style="padding-left: 40px">
        <el-row>
          <el-col :span="8">
            <span>老人姓名：</span>
            <span style="margin-left: 10px">{{ name }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系电话：</span>
            <span style="margin-left: 10px">{{ phone }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px">
          <el-col :span="8">
            <span>告警时间：</span>
            <span style="margin-left: 10px">{{ warningInfo.alertTime }}</span>
          </el-col>
          <el-col :span="8">
            <span>告警类型：</span>
            <span style="margin-left: 10px">
              {{
                alarm_type.find((item) => item.value == warningInfo.alertType)
                  ? alarm_type.find(
                      (item) => item.value == warningInfo.alertType
                    ).label
                  : ""
              }}
            </span>
          </el-col>
          <el-col :span="8">
            <span>告警终端：</span>
            <span style="margin-left: 10px">{{
              warningInfo.alertTerminal
            }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px">
          <el-col :span="24">
            <span>告警地址：</span>
            <span style="margin-left: 10px">
              {{ warningInfo.address }}
            </span>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card
      class="box-card"
      shadow="always"
      style="background: #fafafa; margin-top: 20px"
    >
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <span style="font-weight: 700">处理信息</span>
        </div>
      </template>
      <div style="padding-left: 40px">
        <el-form :model="form" :rules="rules" ref="disposeRef">
          <el-row>
            <el-col :span="8">
              <el-form-item label="处理状态：" style="font-weight: 700">
                <span>
                  {{
                    processing_status.find(
                      (item) => item.value == warningInfo.status
                    )
                      ? processing_status.find(
                          (item) => item.value == warningInfo.status
                        ).label
                      : ""
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理人员: ">
                <el-input
                  v-model="form.handleName"
                  placeholder="请输入处理人员"
                  :disabled="warningInfo.status == '1'"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理时间: ">
                <el-date-picker
                  style="width: 300px"
                  v-model="form.handleTime"
                  type="datetime"
                  :disabled="warningInfo.status == '1'"
                  placeholder="选择处理时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="处理内容: " prop="handleContent">
                <el-input
                  v-model="form.handleContent"
                  type="textarea"
                  :disabled="warningInfo.status == '1'"
                  :autosize="{ minRows: 2, maxRows: 6 }"
                  placeholder="请输入处理内容"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card
      class="box-card"
      shadow="always"
      style="background: #fafafa; margin-top: 15px"
    >
      <div style="text-align: right; padding-right: 50px">
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="submitFormDebounceHandler"
          v-if="warningInfo.status == '0'"
          >保 存</el-button
        >
        <el-button @click="close">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup name="dispose">
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
import { debounce } from "@/utils/debounce.js";

import { getHandleAlertResult, handleAlert } from "@/api/safehome/index";
const {
  bed_uint,
  service_frequency,
  sys_user_sex,
  alarm_type,
  processing_status,
} = proxy.useDict(
  "bed_uint",
  "service_frequency",
  "sys_user_sex",
  "alarm_type",
  "processing_status"
);
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

const submitFormDebounceHandler = debounce(submitForm, 500);
const tableName = ref("");
const alertId = ref("");
const homeBedApplyId = ref("");
const imei = ref("");
const dataId = ref("");
const name = ref("");
const phone = ref("");
const data = reactive({
  form: {
    handleTime: currentTime,
    handleName: JSON.parse(localStorage.getItem("userInfoData")).user.userName,
    handleId: JSON.parse(localStorage.getItem("userInfoData")).user.userId,
    handleContent: undefined,
    id: "",
  },
  warningInfo: {},
  rules: {
    handleContent: [
      { required: true, message: "请输入处理内容", trigger: "blur" },
    ],
  },
});
const { form, rules, warningInfo } = toRefs(data);

function submitForm() {
  proxy.$refs["disposeRef"].validate((valid) => {
    if (valid) {
      form.value.alertId = alertId.value;
      form.value.tableName = tableName.value;
      form.value.homeBedApplyId = homeBedApplyId.value;
      form.value.id = dataId.value;
      handleAlert(form.value).then((res) => {
        proxy.$modal.msgSuccess("处理成功");
        router.push("/SafeHome/AlarmInformation");
      });
    }
  });
}
function close() {
  router.go(-1);
}
function getDatail() {
  let obj = {
    tableName: tableName.value,
    alertId: alertId.value,
    homeBedApplyId: homeBedApplyId.value,
    imei: imei.value,
    id: dataId.value,
  };
  getHandleAlertResult(obj).then((res) => {
    name.value = res.resultInfo.elder.applyName;
    phone.value = res.resultInfo.elder.telephone;
    warningInfo.value = res.resultInfo.handleAlertResult;
    if (warningInfo.value.status == "1") {
      form.value.handleTime = warningInfo.value.handleTime;
      form.value.handleName = warningInfo.value.handleName;
      form.value.handleContent = warningInfo.value.handleContent;
    }
  });
}
const stopWatch = watch(
  () => route,
  (newVal, oldVal) => {
    if (newVal.query) {
      tableName.value = newVal.params.tableName;
      homeBedApplyId.value = newVal.params.homeBedApplyId;
      alertId.value = newVal.params.alertId;
      imei.value = newVal.params.imei;
      dataId.value = newVal.params.id;
      getDatail();
    }
  },
  { immediate: true }
);

onBeforeUnmount(() => {
  stopWatch();
});
</script>
<style scoped lang="scss">
.dispose_container {
  padding: 20px;
}
</style>
